<div class="table-responsive course-table" id="courses-table">
    <div class="table-wrapper course-table-wrapper">
        <h3 class="table-title course-table-title">课程管理</h3>
        <div class="action-btns course-action-btns">
            <!-- 添加课程按钮 -->
            <button data-toggle="modal" data-target="#add-course-modal" class="btn btn-primary">添加课程</button>
        </div><br>
        <!-- 省略实际表格内容；可根据需求填充表格 -->
        <table class="table table-hover course-table">
            <thead>
            <tr>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>课程专业</th>
                <th>授课方式</th>
                <th>课程书籍</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="courses-tbody">
            <!-- 使用 JavaScript 动态填充课程数据 -->
            </tbody>
        </table>
    </div>
</div>

<!-- 增加课程模拟框 -->
<div class="modal fade" id="add-course-modal" tabindex="-1" role="dialog" aria-labelledby="add-course-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add-course-modal-label">添加课程</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-course-form">
                    <div class="form-group">
                        <label for="course-name">课程名</label>
                        <input type="text" class="form-control" id="course-name" placeholder="请输入课程名称">
                    </div>
                    <div class="form-group">
                        <label for="course-major">课程专业</label>
                        <input type="text" class="form-control" id="course-major" placeholder="请输入课程专业">
                    </div>
                    <div class="form-group">
                        <label for="course-delivery">授课方式</label>
                        <select class="form-control" id="course-delivery">
                            <option selected>选择授课方式</option>
                            <option value="线下">线下</option>
                            <option value="线上">线上</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="course-textbook">教科书</label>
                        <input type="text" class="form-control" id="course-textbook" placeholder="请输入教科书名称">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-course-btn">添加课程</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑课程模拟框 -->
<div class="modal fade" id="editCourseModal" tabindex="-1" role="dialog" aria-labelledby="editCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCourseModalLabel">编辑课程信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="edit-course-id"/>
                    <div class="form-group">
                        <label for="edit-course-name">课程名</label>
                        <input type="text" class="form-control" id="edit-course-name" placeholder="请输入课程名称">
                    </div>
                    <div class="form-group">
                        <label for="edit-course-major">课程专业</label>
                        <input type="text" class="form-control" id="edit-course-major" placeholder="请输入课程专业">
                    </div>
                    <div class="form-group">
                        <label for="edit-course-delivery">授课方式</label>
                        <select class="form-control" id="edit-course-delivery">
                            <option value="线下">线下</option>
                            <option value="线上">线上</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-course-textbook">教科书</label>
                        <input type="text" class="form-control" id="edit-course-textbook" placeholder="请输入教科书名称">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveCourseChangesBtn">保存更改</button>
            </div>
        </div>
    </div>
</div>